import { observer } from "mobx-react-lite"
import { useRootStore } from "../../stores/TodoStore/RootStore"
import TodoFooter from "./TodoFooter"
import TodoHeader from "./TodoHeader"
import TodoMain from "./TodoMain"

function TodoListView() {
  const { todoListStore } = useRootStore()
  return (
    <div>
      <h1>11</h1>
        <TodoHeader/>
        <ul>
            {
             todoListStore.todos.map((item)=>(
                <TodoMain todo={item} key={item.id}/>
             )) 
            }
        </ul>
        <TodoFooter/>
    </div>
  )
}

export default observer(TodoListView)